<template>
  <md-nav-bar
    style="position: fixed; top:0;width:100vw;height:100vh"
    title=""
    color="white"
    :bgInfo="{ url: 'https://cdn.xmxiaomai.com/isong_static/invite/bg.png', height: '100vh', type: 'bg' }">
  </md-nav-bar>
  <view class="container">
    <!-- 顶部背景与LOGO -->
    <view class="header-bg">
      <image class="logo" src="https://cdn.xmxiaomai.com/isong_static/invite/logo.png" mode="widthFix" />
      <view class="rule-btn">
        <md-agreement text="活动规则" hideSymbol color="white" />
      </view>
    </view>

    <!-- 权益卡片 -->
    <view class="benefit-card">
      <view class="benefit-content">
        <view class="configuration flex-1">
          <view class="benefit-title">
            <view>温馨提示:</view>
            <view>用户注册完成后，分享、推荐给朋友，对方也完成注册，用户获得{{ data.configuration?.recommendBonusPoint || 0 }}个A豆的奖励。</view>
            <!--              成功邀请-->
            <!--              <text style="color: red">1</text>-->
            <!--              位新用户注册，享受如下权益：-->
            <!--            </view>-->
            <!--            <view class="benefit-list">-->
            <!--              <view>-->
            <!--                1、被邀请人注册后获得-->
            <!--                <text style="color: red">{{ data.configuration?.registerBonusPoint || 0 }}A豆</text>-->
            <!--                ，邀请人获得-->
            <!--                <text style="color: red">{{ data.configuration?.recommendBonusPoint || 0 }}A豆</text>-->
            <!--              </view>-->
            <!--              <view>-->
            <!--                2、被邀请人充值后，邀请人获得-->
            <!--                <text style="color: red">充值金额的{{ data.configuration?.recommendBonusAmountRate || 0 }}%返现</text>-->
            <!--              </view>-->
            <!--              <view>-->
            <!--                （经判定有效-->
            <!--                <text style="color: red">{{ data.configuration?.recommendBonusAmountDay || 0 }}个工作日</text>-->
            <!--                可提现）-->
            <!--              </view>-->
          </view>
        </view>

        <!-- 邀请好友按钮 -->
        <button open-type="share" class="invite-btn">邀请好友</button>
      </view>
    </view>

    <!-- 列表卡片 -->
    <view class="list-card">
      <view class="tab-bar">
        <view :class="['tab', tabIndex === 0 ? 'active' : '']" @tap="tabIndex = 0">邀请列表</view>
        <view :class="['tab', tabIndex === 1 ? 'active' : '']" @tap="tabIndex = 1">奖励列表</view>
      </view>
      <view v-if="tabIndex === 0">
        <md-page-list :api="api.Invitation.list" :params="{ id: data.userId }" @change="pageChange">
          <view v-for="(item, idx) in data.list" :key="idx" class="invite-item">
            <image class="avatar" :src="item.avatar" />
            <view class="info">
              <view class="name">{{ item.invitedName }}</view>
              <view class="time">邀请时间：{{ item.invitedTime }}</view>
            </view>
            <view class="status" :class="item.status == '邀请成功' ? 'success' : 'fail'">
              {{ item.status }}
              <text v-if="item.status !== '邀请成功'" class="fail-reason">{{ item?.description || '' }}</text>
            </view>
          </view>
        </md-page-list>
      </view>
      <view v-if="tabIndex === 1">
        <md-page-list :api="api.Invitation.rewardList" :params="{ id: data.userId }" @change="pageRewardChange">
          <view v-for="(item, idx) in data.rewardList" :key="idx" class="reward-item">
            <view class="info">
              <view class="name">{{ item.detail }}</view>
              <view class="time">{{ item.invitedTime }}</view>
            </view>
            <view class="status success">
              {{ item.description }}
            </view>
          </view>
        </md-page-list>
      </view>
    </view>
  </view>

  <view class="back-top" v-if="showBackTop" @click="backTop" >回顶部</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import {onLoad, onShareAppMessage, onShareTimeline, onPageScroll} from '@dcloudio/uni-app';
// 接口
import api from '@/api';
import type { Invitation } from '@/api/data';

const data = reactive({
  userId: '',
  list: [] as Invitation.List.Data['list'],
  rewardList: [] as Invitation.RewardList.Data['list'],
  configuration: {} as Invitation.GetConfiguration.Data,
});
const showBackTop = ref(false);
const tabIndex = ref(0);

const pageChange = (list: Invitation.List.Data['list']) => {
  data.list = list;
};

const pageRewardChange = (list: Invitation.RewardList.Data['list']) => {
  data.rewardList = list;
};

/**
 * 接口相关
 */
// 获取邀请奖励配置
const fetchGetConfiguration = async () => {
  try {
    const res = await api.Invitation.getConfiguration();
    data.configuration = res.data;
  } catch (e) {}
};

function backTop(){
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  });
}

onPageScroll((event) => {
  // 获取滚动位置
  const scrollPosition = event.scrollTop;
  // 当滚动超过300px时显示回到顶部按钮
  showBackTop.value = scrollPosition > 300;
});

onLoad(options => {
  if (options?.parentId) {
    uni.setStorageSync('parentId', options.parentId);
  }
  data.userId = uni.getStorageSync('auth')?.userId;
  fetchGetConfiguration();
});

// 分享
onShareAppMessage(res => {
  return {
    title: 'isong AI',
    imageUrl: 'https://cdn.xmxiaomai.com/isong_static/share.jpg',
    path: '/pages/index/index' + (data.userId ? ('?parentId=' + data.userId) : ''),
  };
});

onShareTimeline(() => {
  return {
    title: 'isong AI',
    imageUrl: 'https://cdn.xmxiaomai.com/isong_static/share.jpg',
    query: data.userId ? ('parentId=' + data.userId) : ''
  };
});

</script>

<style scoped lang="scss">
.container {
  padding-bottom: 32rpx;
  margin-top: 170rpx;
  height: calc(100vh - 170rpx);
}
.header-bg {
  width: 100vw;
  height: 86rpx;
  margin-bottom: 10rpx;
  position: relative;
  .logo {
    width: 180rpx;
    margin: 40rpx 0 0 40rpx;
  }
  .activity-title {
    position: absolute;
    left: 50%;
    top: 120rpx;
    transform: translateX(-50%);
    font-size: 56rpx;
    font-weight: bold;
    color: #fff7e6;
    text-shadow: 2rpx 4rpx 0 #ff9c3c;
    letter-spacing: 4rpx;
    z-index: 2;
  }
  .rule-btn {
    position: absolute;
    right: 0;
    top: 40rpx;
    color: white;
    border-radius: 32rpx 0 0 32rpx;
    padding: 8rpx 28rpx;
    font-size: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.2);
  }
}
.benefit-card {
  width: 100%;
  height: 868rpx;
  position: relative;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/invite/invite.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .benefit-content {
    width: calc(100% - 220rpx);
    height: 530rpx;
    position: absolute;
    bottom: 78rpx;
    left: 110rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .configuration {
      overflow: hidden;
    }
  }
  .benefit-title {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 24rpx;
    margin-top: 24rpx;
    .highlight {
      color: #ff9c3c;
      font-size: 40rpx;
      font-weight: bold;
      margin: 0 8rpx;
    }
    view {
      margin-bottom: 20rpx;
    }
  }
  .benefit-list {
    font-size: 28rpx;
    color: #333;
    .red {
      color: #ff4d4f;
    }
    .orange {
      color: #ff9c3c;
    }
    view {
      margin-bottom: 12rpx;
    }
  }
}
.invite-btn {
  margin-top: 77rpx;
  height: 80rpx;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/invite/btn_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 44rpx;
  color: #7a2e00;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  line-height: 80rpx;
  width: 488rpx;
  // button 默认样式
  border: none;
  border-radius: none;
  background-color: transparent;
  padding: 0;
  &::after {
    border: none;
    border-radius: none;
  }
}
.list-card {
  position: relative;
  margin: 0 24rpx 0 24rpx;
  background: #fff;
  border-radius: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(31, 169, 140, 0.08);
  padding: 0 0 24rpx 0;
  .tab-bar {
    display: flex;
    justify-content: flex-start;
    border-bottom: 2rpx solid #f0f0f0;
    .tab {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      padding: 28rpx 0 18rpx 0;
      color: #888;
      font-weight: 500;
      position: relative;
      &.active {
        color: #1fa98c;
        font-weight: bold;
        &::after {
          content: '';
          display: block;
          width: 60rpx;
          height: 6rpx;
          background: #1fa98c;
          border-radius: 3rpx;
          position: absolute;
          left: 50%;
          bottom: -2rpx;
          transform: translateX(-50%);
        }
      }
    }
  }
  .invite-item {
    display: flex;
    align-items: center;
    padding: 32rpx 24rpx 0 24rpx;
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      background: #eee;
    }
    .info {
      flex: 1;
      .name {
        font-size: 30rpx;
        color: #222;
        font-weight: 500;
      }
      .time {
        font-size: 24rpx;
        color: #aaa;
        margin-top: 6rpx;
      }
    }
    .status {
      font-size: 28rpx;
      font-weight: 500;
      &.success {
        color: #1fa98c;
      }
      &.fail {
        color: #ff4d4f;
      }
      .fail-reason {
        display: block;
        font-size: 22rpx;
        color: #ff4d4f;
        margin-top: 2rpx;
      }
    }
  }
  .reward-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 24rpx 0 24rpx;
    .info {
      width: 322rpx;
      margin-left: 40rpx;
      .name {
        font-size: 30rpx;
        color: #222;
        font-weight: 500;
      }
      .time {
        font-size: 24rpx;
        color: #aaa;
        margin-top: 6rpx;
      }
    }

    .status {
      flex: 1;
      font-size: 28rpx;
      font-weight: 500;
      text-align: right;
      &.success {
        color: #1fa98c;
      }
    }
  }
  .empty {
    text-align: center;
    color: #bbb;
    font-size: 28rpx;
    padding: 60rpx 0;
  }
}

.back-top {
  position: fixed;
  right: 32rpx;
  bottom: 32rpx;
  width: 90rpx;
  height: 90rpx;
  background: #6a6a6a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s;
  font-size: 24rpx;
}
</style>
